<template>
  <div class="page_applyStockForHe">

    <van-nav-bar
      title="他申请的股份"
      left-arrow
      @click-left="$router.back()"
    />

    <DSUsers :itemObj="userItemInfo" />

    <van-divider :style="{color:'#020202', borderColor: '#DD4F42', padding: '10px 66px', margin: '0'}">
      申请的股份详情
    </van-divider>

    <div class="apply-detail" v-for="(stockDetail, index) in stockDetailArr" :key="stockDetail.id" >
      <van-row type="flex" justify="start" align="center" style="text-align: left" >
        <van-col span="14">
          <div>{{stockDetail.name}}</div>
          <div class="label">总价格{{stockDetail.totalprice}}元；总股份{{stockDetail.totalnum}}股</div>
          <div class="label">未申请次数：{{stockDetail.noapplynum}}股</div>
        </van-col>
        <van-col span="10">
          <van-tag
            plain
            size="medium"
            type="primary"
            @click="toApplyStock(stockDetail)"
          >申请</van-tag>
          <van-tag
            plain
            size="medium"
            type="primary"
            style="margin-left: 20px;"
            @click="toStockDetail(stockDetail)"
          >查看</van-tag>
        </van-col>
      </van-row>
    </div>






  </div>
</template>

<script>
import DSUsers from "./components/DSUsers";
export default {
  name: "applyStockForHe",
  components: {
    DSUsers,
  },

  data(){
    return {
      userItemInfo: {},
      stockDetailArr: [
        {
          id: '1',
          name: '直接股',
          noapplynum: 5,
          totalprice: 500,
          totalnum: 100,
        },
        {
          id: '2',
          name: '间接股',
          noapplynum: 5,
          totalprice: 500,
          totalnum: 100,
        },
      ]
    }
  },

  created() {
    if (this.$route.query.id) {
      this.userItemInfo = this.$route.query
    } else {
      this.$router.back()
    }
  },


  methods: {
    toStockDetail(item){
      const needObj = {
        id: item.idss || '1051',
        name: item.name || '测试股份',
      };
      this.$router.push({
        name: 'stockMarket',
        params: {
          item: JSON.stringify(needObj)
        },
        query: {
          item: JSON.stringify(needObj)
        }
      })

    },

    toApplyStock(stockDetail){

      const eachStockDetail = {
        stockid: stockDetail.idss || '1051',
        stockName: stockDetail.name || '测试股份',
      };
      this.$router.push({
        name: 'applyStock',
        query: {
          eachStockObj: JSON.stringify(eachStockDetail)
        }
      })
    }
  },


}
</script>

<style lang="scss" scoped>
.page_applyStockForHe{
  width: 100%;
  box-sizing: border-box;
  .apply-detail{
    padding: 0.26667rem 0.42667rem;
    background-color: #FFFFFF;
    font-size: 0.37333rem;
    line-height: 0.64rem;
    color: #323233;
    border-bottom: 1px solid #eee;
    .label{
      margin-top: 0.10667rem;
      color: #969799;
      font-size: 0.32rem;
      line-height: 0.48rem;
    }
  }
}
</style>
